<template>
    <div class="cm-bg-c">
        <div v-if="status === 0">
            <el-form ref="formRef" :rules="rules" :model="form" label-width="150px">
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="企业名称" prop="merchantName">
                            <el-input maxlength="20" v-model.trim="form.merchantName" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="法人姓名" prop="corporateName">
                            <el-input maxlength="20" v-model.trim="form.corporateName" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="企业地址" prop="merchantAddress">
                            <el-input maxlength="40" v-model.trim="form.merchantAddress" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="法人身份证号" prop="corporateIdCard">
                            <el-input maxlength="20" v-model.trim="form.corporateIdCard" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="社会信用代码" prop="regNo">
                            <el-input maxlength="20" v-model.trim="form.regNo" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="联系人手机号" prop="contactMobile">
                            <el-input maxlength="20" v-model.trim="form.contactMobile" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="注册资本" prop="regCapital">
                            <el-input maxlength="20" v-model.number="form.regCapital" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="申请邮箱" prop="email">
                            <el-input maxlength="40" v-model.trim="form.email" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="开户名称" prop="cardName">
                            <el-input maxlength="20" v-model.trim="form.cardName" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="开户银行" prop="bankName">
                            <el-input maxlength="20" v-model.trim="form.bankName" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="经营范围" prop="businessScope">
                            <el-input
                                maxlength="140"
                                v-model.trim="form.businessScope"
                                type="textarea"
                                :rows="10"
                                resize="none"
                                show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="开户银行所在省" prop="provinceName">
                            <el-select
                                v-model="form.provinceName"
                                class="zw-select-margin"
                                @change="provinceHandler"
                                placeholder="省份">
                                <el-option
                                    v-for="item in provinceList"
                                    :key="item.province"
                                    :label="item.name"
                                    :value="item.province" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="填写人是否法人" prop="proposer">
                            <el-radio-group v-model="form.proposer">
                                <el-radio label="1">是</el-radio>
                                <el-radio label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="开户银行所在市" prop="cityName">
                            <el-select
                                v-model="form.cityName"
                                class="zw-select-margin"
                                placeholder="城市"
                                @change="cityHandler"
                                no-data-text="请选择省份">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.city"
                                    :label="item.name"
                                    :value="item.city" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" v-if="form.proposer === '2' || form.proposer === ''">
                        <el-form-item
                            label="代理人姓名"
                            prop="agentName"
                            :rules="[
                                {
                                    required: form.proposer === '2',
                                    message: '请输入代理人姓名',
                                    trigger: 'blur'
                                },
                                {
                                    pattern: getRegExp('chinese'),
                                    message: '只能输入中文',
                                    trigger: 'blur'
                                }
                            ]">
                            <el-input maxlength="20" v-model.trim="form.agentName" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="开户银行支行名称" prop="branchName">
                            <el-input maxlength="20" v-model.trim="form.branchName" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" v-if="form.proposer === '2' || form.proposer === ''">
                        <el-form-item
                            label="代理人身份证号"
                            :rules="[
                                {
                                    required: form.proposer === '2',
                                    message: '请输入代理人身份证',
                                    trigger: 'blur'
                                },
                                {
                                    pattern: getRegExp('idcard'),
                                    message: '代理人身份证格式不正确',
                                    trigger: 'blur'
                                }
                            ]"
                            prop="agentIdCard">
                            <el-input maxlength="20" v-model.trim="form.agentIdCard" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="企业对公账号" prop="cardNo">
                            <el-input maxlength="20" v-model.trim="form.cardNo" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"></el-col>
                </el-row>
                <div class="divider"></div>
                <el-row class="zw-form-item">
                    <el-col :span="12">
                        <el-form-item label="受益人是否实际控制人" prop="inBenefit" label-width="180px">
                            <el-radio-group v-model="form.inBenefit">
                                <el-radio label="1">是</el-radio>
                                <el-radio label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"></el-col>
                </el-row>
                <div v-if="form.inBenefit === '2' || form.inBenefit === ''">
                    <el-row class="zw-form-item">
                        <el-col :span="10">
                            <el-form-item
                                label="受益人类型"
                                prop="beneficiaryType"
                                :rules="{
                                    required: form.inBenefit === '2',
                                    message: '请选择受益人类型',
                                    trigger: 'blur'
                                }">
                                <el-radio-group v-model="form.beneficiaryType">
                                    <el-radio label="2">个人</el-radio>
                                    <el-radio label="1">企业</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10"></el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.beneficiaryType === '2' || form.beneficiaryType === ''">
                            <el-form-item
                                label="受益人归属地"
                                prop="beneficiaryArea"
                                :rules="{
                                    required: form.beneficiaryType === '2',
                                    message: '请输入受益人归属地',
                                    trigger: 'blur'
                                }">
                                <el-input maxlength="20" v-model.trim="form.beneficiaryArea" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" v-show="form.beneficiaryType === '1' || form.beneficiaryType === ''">
                            <el-form-item
                                label="受益人企业名称"
                                prop="beneficiaryCompanyName"
                                :rules="{
                                    required: form.beneficiaryType === '1',
                                    message: '请输入受益人企业名称',
                                    trigger: 'blur'
                                }">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.beneficiaryCompanyName"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.beneficiaryType === '2' || form.beneficiaryType === ''">
                            <el-form-item
                                label="受益人姓名"
                                prop="beneficiaryName"
                                :rules="{
                                    required: form.beneficiaryType === '2',
                                    message: '请输入受益人姓名',
                                    trigger: 'blur'
                                }">
                                <el-input maxlength="20" v-model.trim="form.beneficiaryName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" v-show="form.beneficiaryType === '1' || form.beneficiaryType === ''">
                            <el-form-item
                                label="受益人社会信用代码（注册号）"
                                prop="beneficiaryRegNo"
                                label-width="250px"
                                :rules="[
                                    {
                                        required: form.beneficiaryType === '1',
                                        message: '请输入受益人社会信用代码（注册号）',
                                        trigger: 'blur'
                                    },
                                    {
                                        pattern: getRegExp('creditCode'),
                                        message: '受益人社会信用代码（注册号）格式不正确',
                                        trigger: 'blur'
                                    }
                                ]">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.beneficiaryRegNo"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.beneficiaryType === '2' || form.beneficiaryType === ''">
                            <el-form-item
                                label="受益人身份证号"
                                prop="beneficiaryIdCard"
                                :rules="[
                                    {
                                        required: form.beneficiaryType === '2',
                                        message: '请输入受益人身份证号',
                                        trigger: 'blur'
                                    },
                                    {
                                        pattern: getRegExp('idcard'),
                                        message: '受益人身份证号格式不正确',
                                        trigger: 'blur'
                                    }
                                ]">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.beneficiaryIdCard"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" v-show="form.beneficiaryType === '1' || form.beneficiaryType === ''">
                            <el-form-item
                                label="受益人营业期限是否长期"
                                prop="beneficiaryBusinessExtended"
                                label-width="200px"
                                :rules="{
                                    required: form.beneficiaryType === '1',
                                    message: '请选择受益人营业期限是否长期',
                                    trigger: 'change'
                                }">
                                <el-radio-group v-model="form.beneficiaryBusinessExtended">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.beneficiaryType === '2' || form.beneficiaryType === ''">
                            <el-form-item
                                label="受益人身份证是否长期有效"
                                prop="beneficiaryIdCardExtended"
                                label-width="220px"
                                :rules="{
                                    required: form.beneficiaryType === '2',
                                    message: '请选择受益人身份证是否长期有效',
                                    trigger: 'change'
                                }">
                                <el-radio-group v-model="form.beneficiaryIdCardExtended">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :span="10"
                            v-if="
                                (form.beneficiaryType === '1' || form.beneficiaryType === '') &&
                                form.beneficiaryBusinessExtended !== '1'
                            ">
                            <el-form-item
                                label="受益人营业有效期"
                                prop="beneficiaryBusinessExpireDate"
                                label-width="200px"
                                :rules="{
                                    required: form.beneficiaryType === '1' && form.beneficiaryBusinessExtended !== '1',
                                    message: '请选择受益人营业有效期',
                                    trigger: 'change'
                                }">
                                <el-date-picker
                                    v-model="form.beneficiaryBusinessExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col
                            :span="10"
                            v-if="
                                (form.beneficiaryType === '2' || form.beneficiaryType === '') &&
                                form.beneficiaryIdCardExtended !== '1'
                            ">
                            <el-form-item
                                label="受益人身份证有效期"
                                prop="beneficiaryIdCardExpireDate"
                                label-width="220px"
                                :rules="{
                                    required: form.beneficiaryType === '2' && form.beneficiaryIdCardExtended !== '1',
                                    message: '请选择受益人身份证有效期',
                                    trigger: 'change'
                                }">
                                <el-date-picker
                                    v-model="form.beneficiaryIdCardExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="10"> </el-col>
                    </el-row>
                </div>
                <div class="divider"></div>
                <el-row class="zw-form-item">
                    <el-col :span="10">
                        <el-form-item label="法人是否实际控制人" prop="inControl">
                            <el-radio-group v-model="form.inControl">
                                <el-radio label="1">是</el-radio>
                                <el-radio label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10"></el-col>
                </el-row>
                <div v-if="form.inControl === '' || form.inControl === '2'">
                    <el-row class="zw-form-item">
                        <el-col :span="10">
                            <el-form-item
                                label="实际控制人类型"
                                prop="controllerType"
                                :rules="{
                                    required: form.inControl === '2',
                                    message: '请选择实际控制人类型',
                                    trigger: 'blur'
                                }">
                                <el-radio-group v-model="form.controllerType">
                                    <el-radio label="2">个人</el-radio>
                                    <el-radio label="1">企业</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10"></el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.controllerType === '2' || form.controllerType === ''">
                            <el-form-item
                                label="实际控制人归属地"
                                prop="controllerArea"
                                :rules="{
                                    required: form.controllerType === '2',
                                    message: '请输入实际控制人归属地',
                                    trigger: 'blur'
                                }">
                                <el-input maxlength="20" v-model.trim="form.controllerArea" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" v-show="form.controllerType === '1' || form.controllerType === ''">
                            <el-form-item
                                label="实际控制人企业名称"
                                prop="controllerCompanyName"
                                :rules="{
                                    required: form.controllerType === '1',
                                    message: '请输入实际控制人企业名称',
                                    trigger: 'blur'
                                }">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.controllerCompanyName"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.controllerType === '2' || form.controllerType === ''">
                            <el-form-item
                                label="实际控制人姓名"
                                prop="controllerName"
                                :rules="{
                                    required: form.controllerType === '2',
                                    message: '请输入实际控制人姓名',
                                    trigger: 'blur'
                                }">
                                <el-input maxlength="20" v-model.trim="form.controllerName" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" v-show="form.controllerType === '1' || form.controllerType === ''">
                            <el-form-item
                                label="实际控制人社会信用代码（注册号）"
                                prop="controllerRegNo"
                                label-width="250px"
                                :rules="[
                                    {
                                        required: form.controllerType === '1',
                                        message: '请输入实际控制人社会信用代码（注册号）',
                                        trigger: 'blur'
                                    },
                                    {
                                        pattern: getRegExp('creditCode'),
                                        message: '实际控制人社会信用代码（注册号）格式不正确',
                                        trigger: 'blur'
                                    }
                                ]">
                                <el-input maxlength="20" v-model.trim="form.controllerRegNo" show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.controllerType === '2' || form.controllerType === ''">
                            <el-form-item
                                label="实际控制人身份证号"
                                prop="controllerIdCard"
                                :rules="[
                                    {
                                        required: form.controllerType === '2',
                                        message: '请输入实际控制人身份证号',
                                        trigger: 'blur'
                                    },
                                    {
                                        pattern: getRegExp('idcard'),
                                        message: '实际控制人身份证号格式不正确',
                                        trigger: 'blur'
                                    }
                                ]">
                                <el-input
                                    maxlength="20"
                                    v-model.trim="form.controllerIdCard"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" v-show="form.controllerType === '1' || form.controllerType === ''">
                            <el-form-item
                                label="实际控制人营业期是否长期"
                                prop="controllerBusinessExtended"
                                label-width="200px"
                                :rules="{
                                    required: form.controllerType === '1',
                                    message: '请选择实际控制人营业期是否长期',
                                    trigger: 'change'
                                }">
                                <el-radio-group v-model="form.controllerBusinessExtended">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col :span="10" v-show="form.controllerType === '2' || form.controllerType === ''">
                            <el-form-item
                                label="实际控制人身份证是否长期有效"
                                prop="controllerIdCardExtended"
                                label-width="220px"
                                :rules="{
                                    required: form.controllerType === '2',
                                    message: '请选择受益人身份证是否长期有效',
                                    trigger: 'change'
                                }">
                                <el-radio-group v-model="form.controllerIdCardExtended">
                                    <el-radio label="1">是</el-radio>
                                    <el-radio label="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col
                            :span="10"
                            v-if="
                                (form.controllerType === '1' || form.controllerType === '') &&
                                form.controllerBusinessExtended !== '1'
                            ">
                            <el-form-item
                                label="实际控制人营业有效期"
                                prop="controllerBusinessExpireDate"
                                label-width="200px"
                                :rules="{
                                    required: form.controllerType === '1' && form.controllerBusinessExtended !== '1',
                                    message: '请选择受益人营业有效期',
                                    trigger: 'change'
                                }">
                                <el-date-picker
                                    v-model="form.controllerBusinessExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="zw-form-item">
                        <el-col
                            :span="10"
                            v-if="
                                (form.controllerType === '2' || form.controllerType === '') &&
                                form.controllerIdCardExtended !== '1'
                            ">
                            <el-form-item
                                label="实际控制人身份证有效期"
                                prop="controllerIdCardExpireDate"
                                label-width="220px"
                                :rules="{
                                    required: form.controllerType === '2' && form.controllerIdCardExtended !== '1',
                                    message: '请选择受益人身份证有效期',
                                    trigger: 'change'
                                }">
                                <el-date-picker
                                    v-model="form.controllerIdCardExpireDate"
                                    type="date"
                                    placeholder="年/月/日"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="10"> </el-col>
                    </el-row>
                </div>
            </el-form>
            <div class="footer">
                <div class="divider"></div>
                <el-button type="primary" @click="submitHandler">提交开通</el-button>
            </div>
        </div>
        <div class="updoc-status" v-if="status === 1">
            <img class="tip-img" src="@/assets/imgs/sys/pay-updoc-auth.png" />
            <span class="tip-text">资料已提交，待平台审核！</span>
            <el-button type="primary" @click="submitHandler">提交开通</el-button>
        </div>
        <div class="updoc-status" v-if="status === 2">
            <img class="tip-img" src="@/assets/imgs/sys/pay-updoc-edit.png" />
            <div class="tip-text">
                您提交的资料有误，请修改后再次提交！
                <el-popover placement="right" :width="200" trigger="hover" popper-class="updoc-popper">
                    <template #default>
                        <div class="ul">
                            <span class="li">·企业名称和对公账户名称不一致</span>
                            <span class="li">·证件信息已存在</span>
                            <span class="li">·绑定卡已存在</span>
                        </div>
                    </template>
                    <template #reference>
                        <span class="err-info">查看错误信息</span>
                    </template>
                </el-popover>
            </div>
            <el-button type="primary" @click="submitHandler">提交开通</el-button>
        </div>
    </div>
</template>
<script setup>
import request from '@/request';
import storage from '@/commons/storage';
import { ref, reactive, watch } from 'vue';
import { format, getRegExp } from '@/commons/utils';
const emit = defineEmits(['submit']);
const formRef = ref(null);
const form = reactive({
    /** 企业名称*/
    merchantName: '',
    /** 企业地址*/
    merchantAddress: '',
    /** 法人姓名*/
    corporateName: '',
    /** 法人身份证号*/
    corporateIdCard: '',
    /** 社会信用代码*/
    regNo: '',
    /** 联系人手机号*/
    contactMobile: '',
    /** 注册资本*/
    regCapital: '',
    /** 申请邮箱:用于接收注册邮件*/
    email: '',
    /** 开户名称*/
    cardName: '',
    /** 开户银行*/
    bankName: '',
    /** 经营范围*/
    businessScope: '',
    /** 开户银行所在省*/
    provinceName: '',
    /** 填写人是否法人:2-否 1-是*/
    proposer: '',
    /** 开户银行所在市*/
    cityName: '',
    /** 代理人姓名:proposer为2时填写*/
    agentName: '',
    /** 开户银行支行名称*/
    branchName: '',
    /** 代理人身份证号*/
    agentIdCard: '',
    /** 企业对公账号*/
    cardNo: '',
    /** 受益人是否实际控制人:2-否 1-是*/
    inBenefit: '1',
    /** 受益人类型:inBenefit为2时填写;2个人 1-企业*/
    beneficiaryType: '',
    /** 受益人归属地beneficiaryType为2时填写*/
    beneficiaryArea: '',
    /** 受益人姓名 beneficiaryType为2时填写*/
    beneficiaryName: '',
    /** 受益人企业名称 beneficiaryType为1时填写*/
    beneficiaryCompanyName: '',
    /** 受益人社会信用代码(注册号) beneficiaryType为1时填写*/
    beneficiaryRegNo: '',
    /** 受益人身份证号:beneficiaryType为2时填写*/
    beneficiaryIdCard: '',
    /** 受益人营业期限是否长期 beneficiaryType为1时填写；2-否 1-是*/
    beneficiaryBusinessExtended: '',
    /** 受益人身份证是否长期 beneficiaryType为2时填写；2-否 1-是*/
    beneficiaryIdCardExtended: '',
    /** 受益人营业有效期限 格式：yyyy-MM-hh;如果受益人营业有效期限为长期，请设置为2099-12-31*/
    beneficiaryBusinessExpireDate: '',
    /** 受益人身份证有效期限beneficiaryType为2时填写，格式：yyyy-MM-hh;如果受益人身份证有效期限为长期，请设置为2099-12-31*/
    beneficiaryIdCardExpireDate: '',
    /** 法人是否实际控制人:t2-否 1-是*/
    inControl: '1',
    /** 实际控制人类型 inControl为2时填写;2-个人 1-企业*/
    controllerType: '',
    /** 实际控制人归属地 controllerType为2时填写*/
    controllerArea: '',
    /** 实际控制人企业名称;controllerType为1时填写*/
    controllerCompanyName: '',
    /** 实际控制人姓名 controllerType为2时填写*/
    controllerName: '',
    /** 实际控制人社会信用代码(注册号) controllerType为1时填写*/
    controllerRegNo: '',
    /** 实际控制人身份证号 controllerType为2时填写*/
    controllerIdCard: '',
    /** 实际控制人营业期限是否长期 tcontrollerType为1时填写；2-否 1-是*/
    controllerBusinessExtended: '',
    /** 实际控制人身份证是否长期controllerType为2时填写；2-否 1-是*/
    controllerIdCardExtended: '',
    /** 实际控制人营业有效期限,controllerType为1时填写，格式：yy*/
    controllerBusinessExpireDate: '',
    /** 实际控制人身份证有效期限格式：yyyy-MM-hh;如果实际控制人身份证有效期限为长期，请设置为2099-12-31*/
    controllerIdCardExpireDate: ''
});
const provinceList = reactive([]);
const cityList = reactive([]);
const rules = reactive({
    merchantName: [
        { required: true, message: '请输入企业名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    merchantAddress: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
    corporateName: [
        { required: true, message: '请输入法人姓名', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    corporateIdCard: [
        { required: true, message: '请输入法人身份证号', trigger: 'blur' },
        {
            pattern: getRegExp('idcard'),
            message: '法人身份证格式不正确',
            trigger: 'blur'
        }
    ],
    contactMobile: [
        { required: true, message: '请输入联系人手机号', trigger: 'blur' },
        {
            pattern: getRegExp('phone'),
            message: '联系人手机号格式不正确',
            trigger: 'blur'
        }
    ],
    regNo: [
        { required: true, message: '请输入社会信用代码', trigger: 'blur' },
        {
            pattern: getRegExp('creditCode'),
            message: '社会信用代码格式不正确',
            trigger: 'blur'
        }
    ],
    regCapital: [
        { required: true, message: '请输入注册资本', trigger: 'blur' },
        {
            pattern: getRegExp('money'),
            message: '注册资本格式不正确',
            trigger: 'blur'
        }
    ],
    businessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
    email: [
        { required: true, message: '请输入申请邮箱', trigger: 'blur' },
        {
            pattern: getRegExp('email'),
            message: '邮箱格式不正确',
            trigger: 'blur'
        }
    ],
    cardName: [
        { required: true, message: '请输入开户名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '请输入中文',
            trigger: 'blur'
        }
    ],
    bankName: [
        { required: true, message: '请输入开户银行', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '请输入中文',
            trigger: 'blur'
        }
    ],
    provinceName: [{ required: true, message: '请选择开户银行所在省', trigger: 'change' }],
    cityName: [{ required: true, message: '请选择开户银行所在市', trigger: 'blur' }],
    branchName: [
        { required: true, message: '请输入开户银行支行名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '请输入中文',
            trigger: 'blur'
        }
    ],
    cardNo: [
        { required: true, message: '请输入企业对公账号', trigger: 'blur' },
        {
            pattern: getRegExp('bankcard'),
            message: '企业对公账号格式不正确',
            trigger: 'blur'
        }
    ],
    proposer: [{ required: true, message: '请选择填写人是否是法人', trigger: 'change' }],
    inBenefit: [{ required: true, message: '请选择受益人是否实际控制人', trigger: 'change' }],
    inControl: [{ required: true, message: '请选择受益人是否实际控制人', trigger: 'change' }]
});
const status = ref(0);

watch(
    [
        () => form.proposer,
        () => form.inBenefit,
        () => form.beneficiaryType,
        () => form.inControl,
        () => form.controllerType
    ],
    newvalue => {
        // 填写人是法人时清空之前输入的代理人姓名和身份证号
        if (newvalue[0] === '1') {
            form.agentIdCard = '';
            form.agentName = '';
        }
        // todo 受益人是否实际控制人-清空受益人相关信息
        if (newvalue[1] === '1') {
            form.beneficiaryType = '';
            form.beneficiaryArea = '';
            form.beneficiaryName = '';
            form.beneficiaryCompanyName = '';
            form.beneficiaryRegNo = '';
            form.beneficiaryIdCard = '';
            form.beneficiaryBusinessExtended = '';
            form.beneficiaryIdCardExtended = '';
            form.beneficiaryBusinessExpireDate = '';
            form.beneficiaryIdCardExpireDate = '';
        }
        if (newvalue[2] === '2') {
            form.beneficiaryCompanyName = '';
            form.beneficiaryRegNo = '';
            form.beneficiaryBusinessExtended = '';
            form.beneficiaryBusinessExpireDate = '';
        } else {
            form.beneficiaryArea = '';
            form.beneficiaryName = '';
            form.beneficiaryIdCard = '';
            form.beneficiaryIdCardExtended = '';
            form.beneficiaryIdCardExpireDate = '';
        }
        // todo 法人是否实际控制人-清空控制人相关信息
        if (newvalue[3] === '1') {
            form.controllerType = '';
            form.controllerArea = '';
            form.controllerCompanyName = '';
            form.controllerName = '';
            form.controllerRegNo = '';
            form.controllerIdCard = '';
            form.controllerBusinessExtended = '';
            form.controllerIdCardExtended = '';
            form.controllerBusinessExpireDate = '';
            form.controllerIdCardExpireDate = '';
        }
        if (newvalue[4] === '2') {
            form.controllerCompanyName = '';
            form.controllerRegNo = '';
            form.controllerBusinessExtended = '';
            form.controllerBusinessExpireDate = '';
        } else {
            form.controllerArea = '';
            form.controllerName = '';
            form.controllerIdCard = '';
            form.controllerIdCardExtended = '';
            form.controllerIdCardExpireDate = '';
        }
    },
    {
        deep: true
    }
);

// 初始化 获取省市区数据
const initRegionList = () => {
    request('regionServ', { level: 3 }).then(res => {
        res.data.map(item => {
            provinceList.push(item);
        });
    });
};
initRegionList();

/**
 * 省份选择
 */
const provinceHandler = value => {
    form.cityName = '';
    cityList.length = 0;
    provinceList
        .find(item => item.province === value)
        .children.map(item => {
            cityList.push(item);
        });
    formRef.value.validateField('provinceName');
};
const cityHandler = () => {
    formRef.value.validateField('cityName');
};

const submitHandler = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            let formData = {
                merchantName: form.merchantName,
                merchantAddress: form.merchantAddress,
                corporateName: form.corporateName,
                corporateIdCard: form.corporateIdCard,
                regNo: form.regNo,
                contactMobile: form.contactMobile,
                regCapital: form.regCapital,
                email: form.email,
                cardName: form.cardName,
                bankName: form.bankName,
                businessScope: form.businessScope,
                provinceName: provinceList.find(item => item.province === form.provinceName).name,
                cityName: cityList.find(item => item.city === form.cityName).name,
                branchName: form.branchName,
                cardNo: form.cardNo,
                proposer: form.proposer,
                inBenefit: form.inBenefit,
                inControl: form.inControl
            };
            if (formData.proposer === '2') {
                formData.agentName = form.agentName;
                formData.agentIdCard = form.agentIdCard;
            }
            if (formData.inBenefit === '2') {
                formData.beneficiaryType = form.beneficiaryType;
                // 受益人类型为个人
                if (formData.beneficiaryType === '2') {
                    formData.beneficiaryArea = form.beneficiaryArea;
                    formData.beneficiaryName = form.beneficiaryName;
                    formData.beneficiaryIdCard = form.beneficiaryIdCard;
                    formData.beneficiaryIdCardExtended = form.beneficiaryIdCardExtended;
                    formData.beneficiaryIdCardExpireDate =
                        form.beneficiaryIdCardExtended === '1'
                            ? '2099-12-31'
                            : format(form.beneficiaryIdCardExpireDate, 'YYYY-MM-DD');
                } else {
                    formData.beneficiaryCompanyName = form.beneficiaryCompanyName;
                    formData.beneficiaryRegNo = form.beneficiaryRegNo;
                    formData.beneficiaryBusinessExtended = form.beneficiaryBusinessExtended;
                    formData.beneficiaryBusinessExpireDate =
                        form.beneficiaryBusinessExtended === '1'
                            ? '2099-12-31'
                            : format(form.beneficiaryBusinessExpireDate, 'YYYY-MM-DD');
                }
            }
            if (formData.inControl === '2') {
                formData.controllerType = form.controllerType;
                // 实际控制人类型为个人
                if (formData.controllerType === '2') {
                    formData.controllerArea = form.controllerArea;
                    formData.controllerName = form.controllerName;
                    formData.controllerIdCard = form.controllerIdCard;
                    formData.controllerIdCardExtended = form.controllerIdCardExtended;
                    formData.controllerIdCardExpireDate =
                        form.controllerIdCardExtended === '1'
                            ? '2099-12-31'
                            : format(form.controllerIdCardExpireDate, 'YYYY-MM-DD');
                } else {
                    formData.controllerCompanyName = form.controllerCompanyName;
                    formData.controllerRegNo = form.controllerRegNo;
                    formData.controllerBusinessExtended = form.controllerBusinessExtended;
                    formData.controllerBusinessExpireDate =
                        form.controllerBusinessExtended === '1'
                            ? '2099-12-31'
                            : format(form.controllerBusinessExpireDate, 'YYYY-MM-DD');
                }
            }
            // todo 接口联调，现在接口中有三个参数必须传，实则不需要，需要后端修改
            await request('baofuReg', formData);
            // 更新loginNo
            const { data } = await request('baofuRegInfo', { tenantId: storage.get('ZW-TENANT-ID') });
            data.loginNo &&
                storage.set('ZW-TENANT-LOGINNO', {
                    loginNo: data.loginNo,
                    merchantName: data.merchantName,
                    email: data.email
                });
            emit('submit', { proposer: form.proposer });
        }
    });
};
</script>
<style lang="scss">
@import './style.scss';

.cm-bg-c {
    min-height: calc(100vh - 274px);
}

.pay-apply-form-item {
    display: flex;
    justify-content: space-around;
}
.footer {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
}

.updoc-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;

    .tip-img {
        width: 80px;
        height: 80px;
    }

    .tip-text {
        margin-top: 40px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 300;
        color: #33302d;

        .err-info {
            color: #4a90e2;
        }
    }
}

.el-popper.updoc-popper {
    .ul {
        display: flex;
        flex-direction: column;

        .li {
            line-height: 19px;
            font-size: 14px;
            font-weight: 300;
            color: #33302d;
        }
    }
}
</style>
